<template>
    <div>
<!-- 调用组件 -->
      <FormCom labelWidth="100px"
                            ref="searchForm"
                            @sublime="addUser"
                           :searchData="searchData"
                           :searchForm="searchForm" />
 <!-- 表单提交 -->
      <div>
        <!-- <el-button @click="cancel">取 消</el-button> -->
        <!-- <el-button type="primary" @click="notify">提 交</el-button> -->
      </div>
   </div>
</template>

<script>
// import form-submit from "@/components/common/form-submit";
import FormCom from './dynamic-table/components/FormCom'

export default {
  components: {
   FormCom
  },
  data() {
    let caseState = [
      { label: "男", value: 1 },
      { label: "女", value: 2 }
    ];
    let entrustProps = { label: "label", value: "value" };
    let checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      // 如果数据要回显后不可编辑，使用JSON.parse(JSON.stringify())转换
      searchData: {},
      searchForm: [
        {
          type: "Input",
          label: "人员姓名",
          prop: "name",
          width: "180px",
          placeholder: "请输入",
          // 表单验证
          //rules: [{ required: true, message: "请输入活动名称", trigger: "blur" }]
        },
        {
          type: "Input",
          label: "手机号",
          prop: "phone",
          width: "180px",
          placeholder: "请输入",
          rules: [{ required: true, validator: checkPhone, trigger: "blur" }]
        },

        {
          type: "Select",
          label: "性别",
          prop: "sex",
          // 渲染数组
          options: caseState,
          // 下拉转换
          props: entrustProps,
          change: row => "",
          placeholder: "请选择性别",
          rules: [{ required: true, message: "请选择性别", trigger: "change" }]
        },
        // {
        //   type: "Select",
        //   label: "所属公司",
        //   prop: "companyId",
        //   options: [
        //           { label: "合肥联通", value: 0 },
        //           { label: "合肥电信", value: 1 },
        //   ],
        //   props: entrustProps,
        //   change: row => {
        //     this.changeCompany(row);
        //   },
        //   placeholder: "请选择所属公司",
        //   rules: [{ required: true, message: "请选择所属公司", trigger: "change" }]
        // },
        // {
        //   type: "Select",
        //   label: "所属部门",
        //   prop: "deptId",
        //   options: [
        //         { label: "技术部", value: 0 },
        //         { label: "销售部", value: 1 },
        //   ],
        //   props: entrustProps,
        //   change: row => {
        //     this.changeDepar(row);
        //   },
        //   placeholder: "请选择所属部门",
        //   rules: [{ required: true, message: "请选择所属部门", trigger: "change" }]
        // },
        // {
        //   type: "Select",
        //   label: "当前职务",
        //   prop: "postId",
        //   options: [
        //        { label: "前端开发", value: 0 },
        //        { label: "后端开发", value: 1 },
        //   ],
        //   props: entrustProps,
        //   change: row => {
        //     this.changePosition(row);
        //   },
        //   placeholder: "请选择当前职务",
        //   rules: [{ required: true, message: "请选择当前职务", trigger: "change" }]
        // },
        {
          type: "Date",
          label: "时间",
          prop: "date",
          //width: "180px",
          placeholder: "请选择时间",
          rules: [{ required: true, message: "请选择时间", trigger: "change" }]
        },
      ],
      ruleForm: {}
    };
  },
  created() {
      console.log(this)
  },
  methods: {
  // 取消操作
   cancel() {
      //重置表单
      this.$refs.searchForm.reset()
      this.$message('取消操作')
    }, 
  // 提交操作
   notify() {
      this.$refs.searchForm.sublime()
    },
  // 返回提交结果
  addUser(valid) {
      if (valid) {
        console.log(valid)
        console.log(this.searchData)
        this.$message.success('提交成功！')
        // 重置表单,reset为子组件的方法
        // this.$refs.searchForm.reset()
      } else {
        return false
      }
    },
    // 下拉选择分公司，查询部门数据
    changeCompany(row) {
    },
    // 下拉选择部门，查询职位数据
    changeDepar(row) {
    },
    // 职位下拉事件
    changePosition(row) {
    }
  }
};
</script>